<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>eh documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	      <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">eh documentation</a>
            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
                <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>
            <compodoc-menu></compodoc-menu>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <compodoc-menu mode="normal"></compodoc-menu>
               </div>
               <!-- START CONTENT -->
               <div class="content component">
                   <div class="content-data">




<ol class="breadcrumb">
  <li>Components</li>
  <li>XlsxComponent</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
        </li>
        <li >
            <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
        </li>
        <li >
            <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
        </li>
        <li >
            <a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
        </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="c-info"><p class="comment">
    <h3>File</h3>
</p>
<p class="comment">
    <code>src/app/excel/xlsx/xlsx.component.ts</code>
</p>



    <p class="comment">
        <h3>Implements</h3>
    </p>
    <p class="comment">
                <code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
    </p>


<section>
    <h3>Metadata</h3>
    <table class="table table-sm table-hover">
        <tbody>











            <tr>
                <td class="col-md-3">selector</td>
                <td class="col-md-9"><code>app-xlsx</code></td>
            </tr>

            <tr>
                <td class="col-md-3">styleUrls</td>
                <td class="col-md-9"><code>xlsx.component.scss</code></td>
            </tr>



            <tr>
                <td class="col-md-3">templateUrl</td>
                <td class="col-md-9"><code>./xlsx.component.html</code></td>
            </tr>


        </tbody>
    </table>
</section>

    <section>
    <h3 id="index">Index</h3>
    <table class="table table-sm table-bordered index-table">
        <tbody>
                <tr>
                    <td class="col-md-4">
                        <h6><b>Properties</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#body">body</a>
                            </li>
                            <li>
                                <a href="#differ">differ</a>
                            </li>
                            <li>
                                <a href="#fileName">fileName</a>
                            </li>
                            <li>
                                <a href="#head">head</a>
                            </li>
                            <li>
                                <a href="#wopts">wopts</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Methods</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#export">export</a>
                            </li>
                            <li>
                                <a href="#formatBody">formatBody</a>
                            </li>
                            <li>
                                <a href="#getMaxLen">getMaxLen</a>
                            </li>
                            <li>
                                <a href="#ngDoCheck">ngDoCheck</a>
                            </li>
                            <li>
                                <a href="#ngOnInit">ngOnInit</a>
                            </li>
                            <li>
                                <a href="#onClick">onClick</a>
                            </li>
                            <li>
                                <a href="#onFileChange">onFileChange</a>
                            </li>
                            <li>
                                <a href="#onImport">onImport</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Inputs</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#height">height</a>
                            </li>
                            <li>
                                <a href="#width">width</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Outputs</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#onChange">onChange</a>
                            </li>
                        </ul>
                    </td>
                </tr>



                    <tr>
                        <td class="col-md-4">
                            <h6><b>Accessors</b></h6>
                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <ul class="index-list">
                                <li>
                                    <a href="#data">data</a>
                                </li>
                                <li>
                                    <a href="#xlsxData">xlsxData</a>
                                </li>
                                <li>
                                    <a href="#bdHeight">bdHeight</a>
                                </li>
                            </ul>
                        </td>
                    </tr>
        </tbody>
    </table>
</section>

    <section>
    <h3 id="constructor">Constructor</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
<code>constructor(el: <a href="https://angular.io/api/core/ElementRef" target="_blank">ElementRef</a>, differs: <a href="https://angular.io/api/core/IterableDiffers" target="_blank">IterableDiffers</a>)</code>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-4">
                                <div class="io-line">Defined in <a href="" data-line="14" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:14</a></div>
                            </td>
                        </tr>

                <tr>
                    <td class="col-md-4">
                            <div>
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>el</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>differs</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/core/IterableDiffers" target="_blank" >IterableDiffers</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>

    <section>
    <h3 id="inputs">Inputs</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-2">
                        <a name="height"></a>
                        <code>height</code>
                    </td>
                    <td class="col-md-10">
                            <p>
                            <em>Type :</em>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>

                            </p>
                        <p>
                            <em>Default value : </em><code>&#x27;300px&#x27;</code>
                        </p>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:27</a></div>
                            </td>
                        </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-2">
                        <a name="width"></a>
                        <code>width</code>
                    </td>
                    <td class="col-md-10">
                            <p>
                            <em>Type :</em>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>

                            </p>
                        <p>
                            <em>Default value : </em><code>&#x27;300px&#x27;</code>
                        </p>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:25</a></div>
                            </td>
                        </tr>
            </tbody>
        </table>
</section>
    <section>
    <h3 id="outputs">Outputs</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-2">
                        <a name="onChange"></a>
                        <code>onChange</code>
                    </td>
                    <td class="col-md-10">
                        <em><code>$event</code> Type:</em>    <code>EventEmitter&lt;any&gt;</code>

                    </td>
                </tr>
                        <tr>
                            <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:22</a></div>
                            </td>
                        </tr>
            </tbody>
        </table>
</section>


    <section>
    
        <h3 id="methods">
            Methods
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="export"></a>
                        <span class="name">
                            <b>
                            export
                            </b>
                            <a href="#export"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>export()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:120</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="formatBody"></a>
                        <span class="name">
                            <b>
                            formatBody
                            </b>
                            <a href="#formatBody"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>formatBody(v: )</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="62" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:62</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>v</td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    

                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div>
                            </div>
                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="../miscellaneous/typealiases.html#AOA" target="_self" >AOA</a></code>

                            </div>
                                <div class="io-description">
                                    
                                </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="getMaxLen"></a>
                        <span class="name">
                            <b>
                            getMaxLen
                            </b>
                            <a href="#getMaxLen"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>getMaxLen(arr: )</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="79" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:79</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>arr</td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    

                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div>
                            </div>
                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                            </div>
                                <div class="io-description">
                                    
                                </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngDoCheck"></a>
                        <span class="name">
                            <b>
                            ngDoCheck
                            </b>
                            <a href="#ngDoCheck"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>ngDoCheck()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="52" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:52</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngOnInit"></a>
                        <span class="name">
                            <b>
                            ngOnInit
                            </b>
                            <a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>ngOnInit()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="48" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:48</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onClick"></a>
                        <span class="name">
                            <b>
                            onClick
                            </b>
                            <a href="#onClick"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>onClick()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="89" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:89</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onFileChange"></a>
                        <span class="name">
                            <b>
                            onFileChange
                            </b>
                            <a href="#onFileChange"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>onFileChange(evt: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="96" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:96</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>evt</td>
                                                        <td>
                                                                    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    

                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div>
                            </div>
                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                                <div class="io-description">
                                    
                                </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onImport"></a>
                        <span class="name">
                            <b>
                            onImport
                            </b>
                            <a href="#onImport"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>onImport()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="116" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:116</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>

    <section>
    
        <h3 id="inputs">
            Properties
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="body"></a>
                        <span class="name">
                            <b>
                            body
                            </b>
                            <a href="#body"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>body:     <code><a href="../miscellaneous/typealiases.html#AOA" target="_self" >AOA</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="../miscellaneous/typealiases.html#AOA" target="_self" >AOA</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>[
    [{ val: &#x27;张三&#x27; }, { val: &#x27;13300000000&#x27; }, { val: &#x27;98600000000&#x27; }, { val: &#x27;yes&#x27; }, { val: &#x27;雨衣|雨鞋|盔甲&#x27; }],
    [{ val: &#x27;李四&#x27; }, { val: &#x27;13300000000&#x27; }, { val: &#x27;98600000000&#x27; }, { val: &#x27;no&#x27; }, { val: &#x27;雨衣|雨鞋|盔甲&#x27; }],
  ]</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:31</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="differ"></a>
                        <span class="name">
                            <b>
                            differ
                            </b>
                            <a href="#differ"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>differ:     <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:19</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="fileName"></a>
                        <span class="name">
                            <b>
                            fileName
                            </b>
                            <a href="#fileName"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>fileName:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;SheetJS.xlsx&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:94</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="head"></a>
                        <span class="name">
                            <b>
                            head
                            </b>
                            <a href="#head"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>head:     <code><a href="../miscellaneous/typealiases.html#AOA" target="_self" >AOA</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="../miscellaneous/typealiases.html#AOA" target="_self" >AOA</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>[[{ val: &#x27;姓名&#x27; }, { val: &#x27;手机&#x27; }, { val: &#x27;微信&#x27; }, { val: &#x27;是否有装备&#x27; }, { val: &#x27;装备明细(自行填写)&#x27; }]]</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:29</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="wopts"></a>
                        <span class="name">
                            <b>
                            wopts
                            </b>
                            <a href="#wopts"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>wopts:     <code>XLSX.WritingOptions</code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code>XLSX.WritingOptions</code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>{ bookType: &#x27;xlsx&#x27;, type: &#x27;array&#x27; }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:93</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
</section>

    <section>
    <h3 id="accessors">
        Accessors
    </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="data"></a>
                        <span class="name"><b>data</b><a href="#data"><span class="icon ion-ios-link"></span></a></span>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <span class="accessor"><b>get</b><code>data()</code></span>
                    </td>
                </tr>
                            <tr>
                                <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="36" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:36</a></div>
                                </td>
                            </tr>

            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="xlsxData"></a>
                        <span class="name"><b>xlsxData</b><a href="#xlsxData"><span class="icon ion-ios-link"></span></a></span>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <span class="accessor"><b>get</b><code>xlsxData()</code></span>
                    </td>
                </tr>
                            <tr>
                                <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="40" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:40</a></div>
                                </td>
                            </tr>

            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="bdHeight"></a>
                        <span class="name"><b>bdHeight</b><a href="#bdHeight"><span class="icon ion-ios-link"></span></a></span>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <span class="accessor"><b>get</b><code>bdHeight()</code></span>
                    </td>
                </tr>
                            <tr>
                                <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="132" class="link-to-prism">src/app/excel/xlsx/xlsx.component.ts:132</a></div>
                                </td>
                            </tr>

            </tbody>
        </table>
</section>
</div>


    <div class="tab-pane fade  tab-source-code" id="c-source">
        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, OnInit, ElementRef, Input, Output, EventEmitter, IterableDiffers, DoCheck } from &#x27;@angular/core&#x27;;

import * as XLSX from &#x27;xlsx&#x27;;

import _ from &#x27;lodash&#x27;;

type AOA &#x3D; any[][];

@Component({
  selector: &#x27;app-xlsx&#x27;,
  templateUrl: &#x27;./xlsx.component.html&#x27;,
  styleUrls: [&#x27;./xlsx.component.scss&#x27;],
})
export class XlsxComponent implements OnInit {
  constructor(private el: ElementRef, differs: IterableDiffers) {
    this.differ &#x3D; differs.find([]).create(null);
  }

  differ: any;

  @Output()
  onChange: EventEmitter&lt;any&gt; &#x3D; new EventEmitter();

  @Input()
  width: string &#x3D; &#x27;300px&#x27;;
  @Input()
  height: string &#x3D; &#x27;300px&#x27;;

  head: AOA &#x3D; [[{ val: &#x27;姓名&#x27; }, { val: &#x27;手机&#x27; }, { val: &#x27;微信&#x27; }, { val: &#x27;是否有装备&#x27; }, { val: &#x27;装备明细(自行填写)&#x27; }]];

  body: AOA &#x3D; [
    [{ val: &#x27;张三&#x27; }, { val: &#x27;13300000000&#x27; }, { val: &#x27;98600000000&#x27; }, { val: &#x27;yes&#x27; }, { val: &#x27;雨衣|雨鞋|盔甲&#x27; }],
    [{ val: &#x27;李四&#x27; }, { val: &#x27;13300000000&#x27; }, { val: &#x27;98600000000&#x27; }, { val: &#x27;no&#x27; }, { val: &#x27;雨衣|雨鞋|盔甲&#x27; }],
  ];

  get data(): AOA {
    return this.head.concat(this.body);
  }

  get xlsxData(): AOA {
    return this.data.map((item: any) &#x3D;&gt; {
      return item.map(d &#x3D;&gt; {
        return d.val;
      });
    });
  }

  ngOnInit() {
    console.log(this);
  }

  ngDoCheck() {
    const change &#x3D; this.differ.diff(this.data);
    // change &amp;&amp; change.forEachItem(d &#x3D;&gt; {});
    this.onChange.emit(_.merge([], this.xlsxData));

    // here you can do what you want on array change
    // you can check for forEachAddedItem or forEachRemovedItem on change object to see the added/removed items
    // Attention: ngDoCheck() is triggered at each binded variable on componenet; if you have more than one in your component, make sure you filter here the one you want.
  }

  formatBody(v): AOA {
    const len &#x3D; this.getMaxLen(v);
    const ret &#x3D; v.map(item &#x3D;&gt; {
      let r &#x3D; [];
      for (let i &#x3D; 0; i &lt; len; i++) {
        if (!item[i]) {
          r.push({ val: &#x27;&#x27; });
        } else {
          r.push({ val: item[i] });
        }
      }
      return r;
    });
    console.log(ret);
    return ret;
  }

  getMaxLen(arr) {
    let maxLen &#x3D; arr[0].length;
    arr.map(d &#x3D;&gt; {
      if (d.length &gt; maxLen) {
        maxLen &#x3D; d.length;
      }
    });
    return maxLen;
  }

  onClick() {
    this.body.push([{ val: &#x27;李四1&#x27; }, { val: &#x27;13300000000&#x27; }, { val: &#x27;98600000000&#x27; }, { val: &#x27;no&#x27; }, { val: &#x27;雨衣|雨鞋|盔甲&#x27; }]);
  }

  wopts: XLSX.WritingOptions &#x3D; { bookType: &#x27;xlsx&#x27;, type: &#x27;array&#x27; };
  fileName: string &#x3D; &#x27;SheetJS.xlsx&#x27;;

  onFileChange(evt: any) {
    /* wire up file reader */
    const target: DataTransfer &#x3D; &lt;DataTransfer&gt;evt.target;
    if (target.files.length !&#x3D;&#x3D; 1) throw new Error(&#x27;Cannot use multiple files&#x27;);
    const reader: FileReader &#x3D; new FileReader();
    reader.onload &#x3D; (e: any) &#x3D;&gt; {
      /* read workbook */
      const bstr: string &#x3D; e.target.result;
      const wb: XLSX.WorkBook &#x3D; XLSX.read(bstr, { type: &#x27;binary&#x27; });

      /* grab first sheet */
      const wsname: string &#x3D; wb.SheetNames[0];
      const ws: XLSX.WorkSheet &#x3D; wb.Sheets[wsname];

      /* save data */
      this.body &#x3D; this.formatBody(&lt;AOA&gt;XLSX.utils.sheet_to_json(ws, { header: 1 }));
    };
    reader.readAsBinaryString(target.files[0]);
  }

  onImport() {
    this.el.nativeElement.querySelector(&#x27;input[type&#x3D;&quot;file&quot;]&#x27;).click();
  }

  export(): void {
    /* generate worksheet */
    const ws: XLSX.WorkSheet &#x3D; XLSX.utils.aoa_to_sheet(this.xlsxData);

    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook &#x3D; XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, &#x27;Sheet1&#x27;);

    /* save to file */
    XLSX.writeFile(wb, this.fileName);
  }

  get bdHeight() {
    return &#x60;calc(${this.height} - ${this.el.nativeElement.querySelector(&#x27;#hd&#x27;).clientHeight}px)&#x60;;
  }
}
</code></pre>
    </div>

    <div class="tab-pane fade " id="c-templateData">
        <pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;panel-xlsx&quot; [ngStyle]&#x3D;&quot;{&#x27;width&#x27;: width,&#x27;max-height&#x27;:height}&quot;&gt;
  &lt;div class&#x3D;&quot;hd df&quot; #hd id&#x3D;&#x27;hd&#x27;&gt;
    &lt;div class&#x3D;&quot;i file&quot;&gt;
      &lt;input type&#x3D;&quot;file&quot; (change)&#x3D;&quot;onFileChange($event)&quot; multiple&#x3D;&quot;false&quot; /&gt;
      &lt;div (click)&#x3D;&quot;onImport()&quot; class&#x3D;&quot;label&quot;&gt;导入&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i&quot;&gt;
      &lt;button type&#x3D;&quot;button&quot; (click)&#x3D;&quot;export()&quot;&gt;导出&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class&#x3D;&quot;bd&quot; [ngStyle]&#x3D;&quot;{&#x27;width&#x27;: width,&#x27;max-height&#x27;:bdHeight}&quot;&gt;
    &lt;!-- &lt;button type&#x3D;&quot;button&quot; (click)&#x3D;&#x27;onClick()&#x27;&gt;Test&lt;/button&gt; --&gt;
    &lt;table class&#x3D;&quot;sjs-table&quot;&gt;
      &lt;tr *ngFor&#x3D;&quot;let row of data&quot;&gt;
        &lt;td *ngFor&#x3D;&quot;let item of row&quot;&gt;
          {{item.val}}
          &lt;!-- &lt;input disabled&#x3D;&quot;disabled&quot; type&#x3D;&quot;text&quot; [ngModel]&#x3D;&quot;item.val&quot;&gt; --&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
    </div>

    <div class="tab-pane fade " id="c-tree">
        <div id="tree-container"></div>
        <div class="tree-legend">
            <div class="title">
                <b>Legend</b>
            </div>
            <div>
                <div class="color htmlelement"></div><span>Html element</span>
            </div>
            <div>
                <div class="color component"></div><span>Component</span>
            </div>
            <div>
                <div class="color directive"></div><span>Html element with directive</span>
            </div>
        </div>
    </div>

    
</div>

<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
        var COMPONENT_TEMPLATE = '<div><div class="panel-xlsx" [ngStyle]="{\'width\': width,\'max-height\':height}">  <div class="hd df" #hd id=\'hd\'>    <div class="i file">      <input type="file" (change)="onFileChange($event)" multiple="false" />      <div (click)="onImport()" class="label">导入</div>    </div>    <div class="i">      <button type="button" (click)="export()">导出</button>    </div>  </div>  <div class="bd" [ngStyle]="{\'width\': width,\'max-height\':bdHeight}">    <!-- <button type="button" (click)=\'onClick()\'>Test</button> -->    <table class="sjs-table">      <tr *ngFor="let row of data">        <td *ngFor="let item of row">          {{item.val}}          <!-- <input disabled="disabled" type="text" [ngModel]="item.val"> -->        </td>      </tr>    </table>  </div></div></div>'
    var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BComponent', 'selector': 'app-b'},{'name': 'CComponent', 'selector': 'app-c'},{'name': 'ChangeEmailComponent', 'selector': 'app-change-email'},{'name': 'ChangePasswordComponent', 'selector': 'app-change-password'},{'name': 'ChangePhoneComponent', 'selector': 'app-change-phone'},{'name': 'EnrollComponent', 'selector': 'app-enroll'},{'name': 'FileComponent', 'selector': 'app-file'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'GoodComponent', 'selector': 'app-good'},{'name': 'HeaderComponent', 'selector': 'app-header'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'LineComponent', 'selector': 'app-line'},{'name': 'LoginComponent', 'selector': 'app-login'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'SelectAreaComponent', 'selector': 'app-select-area'},{'name': 'SelectAreaRangeComponent', 'selector': 'app-select-area-range'},{'name': 'SelectGoodTypeComponent', 'selector': 'app-select-good-type'},{'name': 'SelectPosComponent', 'selector': 'app-select-pos'},{'name': 'SideComponent', 'selector': 'app-side'},{'name': 'UserHeaderComponent', 'selector': 'app-user-header'},{'name': 'XlsxComponent', 'selector': 'app-xlsx'}];
    var DIRECTIVES = [{'name': 'CodeDirective', 'selector': '[appCode]'}];
    var ACTUAL_COMPONENT = {'name': 'XlsxComponent'};
</script>
<script src="../js/tree.js"></script>














                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
               <!-- END CONTENT -->
           </div>
       </div>

       <script>
            var COMPODOC_CURRENT_PAGE_DEPTH = 1;
            var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
            var COMPODOC_CURRENT_PAGE_URL = 'XlsxComponent.html';
       </script>

       <script src="../js/libs/custom-elements.min.js"></script>
       <script src="../js/libs/lit-html.js"></script>
       <script src="../js/menu-wc.js"></script>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/clipboard.min.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
          <script src="../js/search/search.js"></script>
          <script src="../js/search/lunr.min.js"></script>
          <script src="../js/search/search-lunr.js"></script>
          <script src="../js/search/search_index.js"></script>
       <script src="../js/lazy-load-graphs.js"></script>


    </body>
</html>
